<!doctype html>

<%@ page import="java.util.List"%>
<%@ page import="java.util.ArrayList"%>

<%@ page import="com.seabook.happy.website.pojos.CaptchaImage"%>
<%@ page import="com.seabook.happy.website.pojos.BlogArticle"%>
<%@ page import="com.seabook.happy.website.pojos.BlogComment"%>
<%@ page import="com.seabook.happy.website.daos.BlogArticleDao"%>
<%@ page import="com.seabook.happy.website.daos.BlogCommentDao"%>
<%@ page import="com.seabook.happy.website.utils.DateUtils"%>

<%@page import="com.google.appengine.api.datastore.KeyFactory"%>

<%@ include file="header_inc.jsp"%>
<%
	String key = request.getParameter("id");
	BlogArticleDao aDao = new BlogArticleDao();
	BlogCommentDao cDao = new BlogCommentDao();
	BlogArticle article = aDao.findBlogArticle(KeyFactory
			.stringToKey(key));
	List<BlogComment> comments = cDao.findAllRelatedComments(article);
	int commentsNo = comments.size();
%>
<article>
	<header>
		<time pubdate="" datetime=""><%=DateUtils.parseDate(article.getCreatedDate(),
					DateUtils.BLOG_DATE_FORMAT)%>
		</time>
		<h1><%=article.getTitle()%></h1>
	</header>
	<p>
		<%=article.getContent().getValue()%>
	</p>
	<footer>
		by Seabook created at
		<%=DateUtils.parseDate(article.getCreatedDate())%>
		and latest modified time:
		<%=DateUtils.parseDate(article.getModifiedDate())%>
	</footer>
</article>
<br>
<!-- Display all the comments. -->

<%=commentsNo%>
comments has been posted!
<%
	for (BlogComment comment : comments) {
%>
<article>
	<header> </header>
	<p>
		<%=comment.getUsername()%>
		<br>
		<%=comment.getEmail()%>
		<br>
		<%=comment.getContent().getValue()%>
		<br>
	</p>
	<footer> </footer>
</article>
<%
	}
%>

<br />

<article>
	<header>Leave your comments here:</header>
	<form class="alignLeft"
		action="/commentUpdateServlet?action=new&article-id=<%=key%>"
		method="post">
		<label for="username">Username:</label> <input id="username"
			name="username" required="required" type="text"
			placeholder="Enter your name" /> <br> <label for="Email">E-mail:</label>
		<input id="email" name="email" type="email" required="required"
			placeholder="Enter your email address" /> <br> <img
			alt="Verfication Code" src="/captchaServiceServlet">
		<script language="JavaScript" type="text/javascript">
			//Gets the browser specific XmlHttpRequest Object
			function getXmlHttpRequestObject() {
				if (window.XMLHttpRequest) {
					return new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} else {
					//Display your error message here. 
					//and inform the user they might want to upgrade
					//their browser.
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
			//Get our browser specific XmlHttpRequest object.
			var receiveReq = getXmlHttpRequestObject();		
			//Initiate the asyncronous request.
			function checkCaptcha(captcha) {
				
				//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
					//Setup the connection as a GET call to SayHello.html.
					//True explicity sets the request to asyncronous (default).
					url = '/captchaServiceServlet?captcha=' + captcha.value;
					receiveReq.open("GET", url, true);
					//Set the function that will be called when the XmlHttpRequest objects state changes.
					receiveReq.onreadystatechange = handleCheckCaptcha;
					//Make the actual request.
					receiveReq.send(null);
				}			
			}
			//Called every time our XmlHttpRequest objects state changes.
			function handleCheckCaptcha() {
				//Check to see if the XmlHttpRequests state is finished.
				if (receiveReq.readyState == 4) {
					//Set the contents of our span element to the result of the asyncronous call.
					captchaOk = receiveReq.responseText;
					//if (document.getElementById('verfication').value = '') captchaOk = 1;
					if (captchaOk != 1) {
						alert("wrong");
						document.getElementById('verfication').value.setCustomValidity('Verification Code Incorrect');
					} else {
					}
				}
			}
			</script>
		<!-- used to display the results of the asyncronous request -->
		<span id="span_result"></span>
		<input id="verfication" name="verfication" type="text"
			required="required"
			onchange="checkCaptcha(document.getElementById('verfication'))"
			placeholder="Enter your verification code" /> <br>
		<textarea id="comment-id" name="comment" rows="5" cols="60"></textarea>
		<input type="submit" value="submit comment" />
	</form>
</article>
<%@ include file="footer_inc.jsp"%>